<template>
  <div class="login-box">
    <div class="login-form-wrapper">
      <div class="login-form-title">{{ $t('请扫码后,点击我已扫码！') }}</div>
      <div class="login-form-error-msg">{{ errorMessage }}</div>
      <a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical">
        <!-- 显示二维码图片 -->
        <img  src="./images/7371740906226_.pic.jpg" alt="二维码" class="qr-code-image" />
        <!-- 我已扫码按钮 -->
        <a-button
          type="primary"
          @click="handleScanned"
          
        >
          {{ $t('我已扫码') }}
        </a-button>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';

const router = useRouter();
const { t } = useI18n();

// 定义响应式数据
const showQrCode = ref(false);
const qrCodeUrl = ref('');
const errorMessage = ref('');
const isLoading = ref(false);
const isChecking = ref(false);
const userInfo = ref({});
let intervalId: number | null = null;

// 处理扫码登录
const handleQrCodeLogin = async () => {
  isLoading.value = true;
  try {
    // 向后端请求二维码图片的 URL
    const response = await axios.get('/api/getQrCode');
    qrCodeUrl.value = response.data.qrCodeUrl;
    showQrCode.value = true;
    // 启动轮询检查扫码状态
    intervalId = setInterval(async () => {
      try {
        const statusResponse = await axios.get('/api/checkQrCodeStatus');
        const status = statusResponse.data.status;
        if (status === 'scanned') {
          clearInterval(intervalId as number);
          // 扫码成功，跳转到指定页面
          router.push({
            name: 'qrCodeLogin',
          });
        } else if (status === 'expired') {
          clearInterval(intervalId as number);
          showQrCode.value = false;
          errorMessage.value = t('二维码已过期，请重新扫码');
        }
      } catch (error) {
        console.error('检查扫码状态出错:', error);
      }
    }, 3000); // 每 3 秒检查一次
  } catch (error) {
    console.error('获取二维码出错:', error);
    errorMessage.value = t('获取二维码出错，请稍后重试');
  } finally {
    isLoading.value = false;
  }
};

// 处理点击我已扫码按钮
const handleScanned = async () => {
  router.push({
    name: 'qrCodeLogin',
  })
};

// 组件卸载时清除定时器
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style lang="less" scoped>
.login-form {
  &-wrapper {
    width: 320px;
  }

  &-title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  &-sub-title {
    color: var(--color-text-3);
    font-size: 16px;
    line-height: 24px;
  }

  &-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
  }

  &-password-actions {
    display: flex;
    justify-content: space-between;
  }

  &-register-btn {
    color: var(--color-text-3) !important;
  }
}

@font-face {
  font-family: "iconfont";
  /* Project id 3606608 */
  src: url('//at.alicdn.com/t/c/font_3606608_y4iw4xdogic.woff2?t=1661252460893') format('woff2'),
    url('//at.alicdn.com/t/c/font_3606608_y4iw4xdogic.woff?t=1661252460893') format('woff'),
    url('//at.alicdn.com/t/c/font_3606608_y4iw4xdogic.ttf?t=1661252460893') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yanzhengyanzhengma:before {
  content: "\e624";
}

.identifyingCode {
  width: 170px;
}

.identifyingCode-img {
  margin-left: 40px;
}

.login-form-title {
  color: rgb(230, 230, 238);
  font-size: 21px;
  text-align: center;
}

.login-box {
  width: 520px;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: rgba(44, 58, 188, 0.5);
  box-shadow: 0 0 4px 3px #a2cbf7;
  // border: 1px solid rgb(13, 76, 127);
  border-radius: 10px;
  position: relative;
}

// 新增的扫码登录按钮样式
.qr-code-login-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #0575ef;
  cursor: pointer;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-bottom: 20px;
}

::v-deep .arco-input-wrapper {
  background-color: rgba(253, 253, 253, 0.9);
  color: rgb(59, 62, 62);
  border-radius: 7px;
}

.arco-btn-primary {
  background-color: #0575ef;
}

// .login-form-wrapper {}
</style>